<template>
	<view class="sticky-box">
		<view class="tablist">
			<u-tabs :current="tabCurrent" :list="tabList" lineColor="#07C160" :itemStyle="{width: '50%', height: '94rpx'}"
				:activeStyle="{color: '#05C160', fontWeight: 'bold', fontSize: '28rpx'}" lineWidth="100rpx" @change="tabChange"></u-tabs>
		</view>
		<view class="exchange-box" v-if="tabCurrent == 1">
			<u-tabs :current="exchangeCurrent" :list="exchangeTabList" lineColor="#07C160" :itemStyle="{width: '20%', height: '94rpx', backgroundColor: '#fff'}"
				:activeStyle="{color: '#292929', fontWeight: 'bold', fontSize: '28rpx'}"></u-tabs>
		</view>
	</view>
	<view class="order-list">
		<view class="order-item" v-for="(item, i) in 10" :key="i">
			<view class="between title-box">
				<view>旧衣回收订单</view>
				<view>已取消</view>
			</view>
			<view class="between bottom">
				<view>上门时间：</view>
				<view>2023-9-29 09:00-11:00</view>
			</view>
			<view class="between bottom">
				<view>上门快递：</view>
				<view>德邦快递</view>
			</view>
			<view class="between bottom">
				<view>预约重量：</view>
				<view>5-10KG</view>
			</view>
			<view class="between bottom">
				<view>预计返还：</view>
				<view>1700-3200积分</view>
			</view>
			<view class="between">
				<!-- 占位 -->
				<view></view>
				<view>790-1580g能量</view>
			</view>
			<view class="between top">
				<view>2023-9-28 19:48:58</view>
				<view class="btn">
					<u-button color="#05C160" shape="circle" size="mini">订单详情</u-button>
				</view>
			</view>
		</view>
	</view>
	<view class="more">
		<u-loadmore line :status="status" />
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	const tabList = reactive([{
		name: '我的回收'
	}, {
		name: '我的兑换'
	}])
	const exchangeTabList = reactive([{
		name: '全部'
	}, {
		name: '待发货'
	}, {
		name: '已发货'
	}, {
		name: '已完成'
	}, {
		name: '已取消'
	}])
	const tabCurrent = ref(0)
	const exchangeCurrent = ref(0)
	const status = ref('loadmore')
	const tabChange = (e: any) => {
		console.log(e);
		tabCurrent.value = e.index
	}
</script>

<style lang="scss" scoped>
	.sticky-box {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #F6F6F6;
	}
	.tablist {
		background-color: #fff;
	}
	.exchange-box {
		margin-top: 4rpx;
		padding: 0 10rpx;
	}
	.order-list {
		padding: 26rpx;
		.order-item {
			padding: 14rpx 32rpx;
			color: #565656;
			font-size: 26rpx;
			background-color: #fff;
			border-radius: 14rpx;
			margin-bottom: 20rpx;
			.title-box {
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #565656;
				margin-bottom: 28rpx;
			}
			.between {
				@include flex-between(100%);
				font-size: 30rpx;
			}
			.bottom {
				margin-bottom: 20rpx;
			}
			.top {
				margin-top: 28rpx;
			}
		}
	}
	.more {
		padding-bottom: 50rpx;
	}
</style>
